<!--
 * @Author: wangming
 * @Date: 2020-11-06 11:40:04
 * @LastEditors: wangming
 * @LastEditTime: 2022-03-08 17:09:47
 * @Description: file content
-->
<template>
  <xInput
    @keyup.native="({ keyCode }) => runEventName('keyup', { values: keyCode })"
    @keyup.enter.native="enter"
    :viewInfo="viewInfo"
    @blur="handleBlur"
    :value="value + ''"
    :showSeparator="config.__config.showSeparator"
    clearable
    :placeholder="config.__config.placeholder"
    controls-position="right"
    size="small"
    :style="{ width: config.__config.width + '%', height: '32px' }"
    @input="changes"
    :limitNumber="config.__config.limitNumber"
    :disabled="disabled"
    :max="config.__config.max"
    :min="config.__config.min"
  >
    <span slot="prefix" v-if="!!unit">{{ unit }}</span>
  </xInput>
</template>
<script>
import myMixin from "@/pageComponents/myMixin";
import xInput from "@/components/xInput/index.js";
import { TABLE_CURRENCY_ENUM } from "@/utils/enum";
import { Debounce } from "@/utils/decorator";
import vmMixin from "@/pageComponents/vmMixin";
export default {
  components: { xInput },
  mixins: [myMixin, vmMixin],
  data() {
    return {
      valueData: null,
    };
  },
  computed: {
    unit() {
      return (
        TABLE_CURRENCY_ENUM.find((i) => i.key == this.config.__config.currency)
          ?.unit ||
        this.config.__config.otherUnit ||
        ""
      );
    },
    relationCom() {
      let min = "value";
      let max = "value";
      const {
        minType,
        minRelation,
        maxType,
        maxRelation,
      } = this.config.__config;
      if (minType === "relation" && minRelation) {
        min = this.form[minRelation];
      }
      if (maxType === "relation" && maxRelation) {
        max = this.form[maxRelation];
      }
      return { min, max };
    },
  },
  watch: {
    relationCom: {
      handler({ min, max }) {
        if (min !== "value") {
          this.config.__config.min = min;
        }
        if (max !== "value") {
          this.config.__config.max = max;
        }
      },
      immediate: true,
    },
  },
  methods: {
    async enter() {
      await this.$nextTick();
      this.runEventName("enter");
    },
    changes(v) {
      this.outInput(v);
    },
    handleBlur(v) {
      let _value;
      if (v !== 0 && !v) {
        _value = null;
      } else {
        _value = Number(v);
      }
      if (this.value !== _value) {
        this.$emit("input", _value);
        this.$nextTick().then(() => {
          this.runEventName("change", { values: _value });
        });
      }
      this.$nextTick().then(() => {
        this.runEventName("blur");
      });
    },
    @Debounce()
    outInput(v) {
      let _value;
      if (v !== 0 && !v) {
        _value = null;
      } else {
        _value = Number(v);
      }
      this.$emit("input", _value);
      this.$nextTick().then(() => {
        this.runEventName("change", { values: _value });
      });
    },
  },
};
</script>
